<template>
  <div>
    <el-form :inline="true" style="text-align: left" ref="query" :model="query">
      <el-row class="query">

      </el-row>
    </el-form>
    <el-table :data="tableData" border style="width: 100%"
              row-key="currentStages"
              :tree-props="{children: 'shardList'}"
    >
      <!-- <el-table-column
        type="selection"
        :reserve-selection="true"
        width="36"
        class-name="checkBox"
      /> -->
      <el-table-column
        prop="currentStages"
        label="期数"
        width="100"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="answerAmount"
        label="应还总额"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="answerMonth"
        label="应还月"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="answerDay"
        label="应还日"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="actualMonth"
        label="实还月"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="actualDay"
        label="实还日"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="overdueStatus"
        label="是否逾期"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="withHoldStatus"
        label="扣款状态"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="代扣通道"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="{ row }">

          <span v-if="row.withHoldType == 0">银联</span>
          <span v-if="row.withHoldType == 1">银盛</span>
          <span v-if="row.withHold
==1 && row.withHoldType == null ||  row.withHoldType == 2">线下</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="withHoldCode"
        label="银联扣款码"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="yseOutTradeNo"
        label="银盛扣款码"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="withHoldAmount"
        label="实扣总额"
        :show-overflow-tooltip="true"
      />
      <!-- <el-table-column
        prop="nameq"
        label="实还本金"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="nameq"
        label="实还手续费"
        :show-overflow-tooltip="true"
      /> -->
      <el-table-column
        prop="applyPerson"
        label="申请扣款人"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="actualTime"
        label="实际扣款时间"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="commissionStatus"
        label="是否计算提成"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="achievementStatus"
        label="是否计算业绩"
        :show-overflow-tooltip="true"
      />
      <el-table-column prop="note" label="备注" :show-overflow-tooltip="true" />
      <el-table-column fixed="right" label="操作" width="250" align="center">
        <template slot-scope="scope">

          <!--          <el-popconfirm-->
          <!--            title="确定发起扣款吗？"-->
          <!--            @onConfirm="deductionFun(scope.row)"-->
          <!--          >-->
          <el-button
            slot="reference"
            type="text"
            size="small"
            :class="scope.row.withHold == 1 ? 'native' : 'active'"
            v-no-more-click
            :disabled="scope.row.withHold == 1" @click="showLayer('initiate',scope.row)">发起扣款
          </el-button
          >
          <!--          </el-popconfirm>-->
          <el-button
            slot="reference"
            type="text"
            size="small"
            :class="scope.row.withHold == 1 ? 'native' : 'active'"
            v-no-more-click
            :disabled="scope.row.withHold == 1"
            @click="offlineFun(scope.row)"
          >线下代扣
          </el-button
          >
          <el-button
            slot="reference"
            type="text"
            size="small"
            class="active"
            v-no-more-click
            @click="showFQLayer(scope.row)" v-if="scope.row.node=='parent'"
          >分期扣款
          </el-button
          >
          <el-button
            slot="reference"
            type="text"
            size="small"
            style="color: #ffa42f"
            v-no-more-click
            @click="rexponseStust(scope.row)"
          >响应状态
          </el-button
          >
          <el-button
            slot="reference"
            type="text"
            size="small"
            style="color: #555555"
            v-no-more-click
            @click="payQueryFun(scope.row)"
          >查询
          </el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <p class="content">
      小计，总共{{ perInfo.stagesNum || 0 }}期，总应还￥{{ perInfo.stagesAmount || 0 }}。已结清{{ perInfo.completedNum || 0 }}期，已还总额￥{{
        perInfo.completedAmount || 0
      }}（其中部分扣款{{ perInfo.instalmentNum || 0 }}期，总额¥{{ perInfo.instalmentCash || 0
      }}元），部分分期银联¥{{ perInfo.unionAmount }}元，部分分期银盛¥{{ perInfo.yseAmount }}元，部分分期线下{{ perInfo.offlineAmount
      }}元，剩余待还￥{{ perInfo.overAmount || 0 }}。累计逾期{{
        perInfo.overdueNum || 0
      }}次。
    </p>
    <p class="content" v-if="perInfo.isOver == 1">
      总结: 该客户于{{ perInfo.overTime }}提前还款{{ perInfo.overMoney }}，抵扣保证金{{ perInfo.margin
      }}元，退保证金{{ perInfo.earnestMoney == null ? "0" : perInfo.earnestMoney }}元，总费用{{ TotalMoney }}元。
    </p>
    <div class="pagination">
      <span class="title">小计：共{{ this.total }}条数据</span>
      <el-pagination
        background
        layout="total,prev, pager, next, sizes"
        :total="total"
        :page-size="query.pageSize"
        :current-page.sync="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
    <el-dialog
      title="响应状态"
      :visible.sync="dialogVisible"
      :modal-append-to-body="false"
      append-to-body
      width="40%"
    >
      <el-form
        :inline="true"
        :model="responseData"
        label-width="120px"
        class="demo-form-inline"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="同步响应">
              <el-input v-model="responseData.respCode" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="同步响应描述">
              <el-input v-model="responseData.respDescribe" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="异步响应">
              <el-input v-model="responseData.asyCode" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="异步响应描述">
              <el-input v-model="responseData.asyDescribe" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <!-- 查询弹框 -->
    <el-dialog
      title="查询结果"
      :visible.sync="dialogVisiblepay"
      :modal-append-to-body="false"
      append-to-body
      width="40%"
    >
      <el-form
        :inline="true"
        :model="payQueryData"
        label-width="120px"
        class="demo-form-inline"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="响应码" prop="respCode">
              <el-input v-model="payQueryData.respCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="支付状态" prop="message">
              <el-input v-model="payQueryData.message"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <!-- 线下扣款 -->
    <el-dialog
      title="线下扣款"
      :visible.sync="offlineDialog"
      :modal-append-to-body="false"
      append-to-body
      width="25%"
      :before-close="closeOfflineDia"
    >
      <el-form
        :inline="true"
        :model="offlineForm"
        ref="offlineForm"
        :rules="rules"
        label-width="120px"
        class="demo-form-inline"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="还款时间" prop="date">
              <el-date-picker
                v-model="offlineForm.date"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="授权密码" prop="authPass">
              <el-input
                v-model="offlineForm.authPass"
                style="width: 220px"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="还款金额" prop="offlineAmount">
              <el-input
                v-model="offlineForm.offlineAmount" type="number"
                style="width: 220px"
              ></el-input>
              <span> 元</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="note">
              <el-input
                v-model="offlineForm.note"
                type="textarea"
                :rows="2"
                maxlength="50"
                style="width: 220px"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="offlineSubim">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 分期扣款 -->
    <el-dialog
      title="分期扣款"
      :visible.sync="showFQKK"
      :modal-append-to-body="false"
      append-to-body
      width="25%"
      :before-close="closefenQi"
    >
      <el-row>
        <el-col :span="24">
          <span>扣款金额：</span>
          <el-input
            type="number"
            v-model="fqFrom.cash"
            style="width: 220px;margin: 0 10px" placeholder="请输入"
          ></el-input>
          <span>元</span>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="fqSubim">发起扣款</el-button>
      </span>
    </el-dialog>
    <!--    银联银盛分别扣款-->
    <el-dialog title="选择扣款渠道"
               :visible.sync="deductionShow"
               :modal-append-to-body="false"
               append-to-body
               width="25%"
               class="koukuan-layer">
      <el-button type="primary" @click="channelSelection(0)">银联扣款</el-button>
      <el-button type="primary" @click="channelSelection(1)">银盛扣款</el-button>

    </el-dialog>

  </div>
</template>

<script>
import {
  getPagePersonInfo,
  postDeductPerson,
  getPersonInfoTotal,
  getChinaPayCode,
  getPayQuery,
  putOffline,
  signInstallment
} from "@/assets/js/api";

export default {
  name: "Personnel",
  props: {
    diaId: {
      type: Number
    }

  },
  data() {
    return {
      query: {
        pageSize: 10,
        pageNo: 1,
        id: null
      },
      total: 10,
      pages: 0,
      currentPage: 1,
      tableData: [],
      responseData: {
        respCode: "",
        asyCode: "",
        asyDescribe: "",
        respDescribe: ""
      },
      perInfo: {},
      dialogVisible: false,
      payQueryData: {
        isOrderStatus: null
      },
      dialogVisiblepay: false,
      offlineDialog: false,
      offlineForm: {
        note: "",
        authPass: "",
        offlineAmount: "",
        date: "",
        id: ""
      },
      rules: {
        note: [
          { min: 0, max: 50, message: "不可超过50个字符", trigger: "blur" }
        ],
        authPass: [
          { required: true, message: "请输入授权密码", trigger: "blur" }
        ],
        offlineAmount: [
          { required: true, message: "请输入还款金额", trigger: "blur" }
        ],
        date: [
          {
            required: true,
            message: "请选择日期",
            trigger: "change"
          }
        ]
      },
      showFQKK: false,//控制分期扣款弹
      fqFrom: {
        cash: "",//分期扣款金额
        id: ""
      },
      TotalMoney: 0,

      deductionShow: false, //选择起到扣款弹窗
      channelStatus: "",//按钮状态  发起扣款：initiate  分期扣款 ：staging
      channel: 0,//银联0 /银盛 1
      currentInfo: {}//当前row信息


    };
  },
  created() {
    this.query.id = this.diaId;
    this.gitList();
    this.getPersonInfo();
  },
  methods: {
    //根据按钮点击获取信息
    showLayer(type, row) {
      this.deductionShow = true;
      this.channelStatus = type;
      this.currentInfo = row;
    },
    //选择扣款渠道
    channelSelection(type) {
      this.channel = type;
      console.log(this.channelStatus, this.currentInfo);
      if (this.channelStatus == "initiate") {
        //发起扣款
        this.deductionFun(this.currentInfo);
      } else {
        //分期扣款
        this.showFQLayer(this.currentInfo);
      }
    },
    //关闭分期扣款弹层
    closefenQi(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
          this.fqFrom.cash = "";
          this.fqFrom.id = "";
        })
        .catch(() => {
        });

    },
    //发起分期扣款
    fqSubim() {
      if (!this.fqFrom.cash) {
        this.$message.error("请填写金额");
        return;
      }
      this.fqFrom.cash = +this.fqFrom.cash;
      this.fqFrom.channel = 0;
      signInstallment(this.fqFrom).then((res) => {
        this.fqFrom.cash = "";
        this.showFQKK = false;
        this.deductionShow = false;
        this.$message.success(res.message);
        this.gitList();

      });
    },
    //显示分期扣款弹层
    showFQLayer(row) {
      this.fqFrom.id = row.id;
      this.showFQKK = true;
    },
    // 获取数据
    gitList() {
      getPagePersonInfo(this.query).then((res) => {
        if (res.code == 200) {
          res.data.records.map(item => {
            item.node = "parent";
            if (item.shardList) {
              item.shardList.map(itm => {
                itm.node = "childer";
                return itm;
              });
            }
            return item;

          });
          this.tableData = res.data.records;
          this.currentPage = res.data.current;
          this.total = res.data.total;
          this.pages = res.data.pages;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 明细统计
    getPersonInfo() {
      getPersonInfoTotal(this.diaId).then((res) => {
        if (res.code == 200) {
          this.perInfo = res.data;
          //计算总金额
          if (this.perInfo.isOver === 1) {
            let overMoney = this.perInfo.overMoney === null ? "0" : this.perInfo.overMoney;
            let margin = this.perInfo.margin === null ? "0" : this.perInfo.margin;
            let completedAmount = this.perInfo.completedAmount === null ? "0" : this.perInfo.completedAmount;
            let earnestMoney = this.perInfo.earnestMoney === null ? "0" : this.perInfo.earnestMoney;
            if (this.perInfo) {
              this.TotalMoney = overMoney + margin + completedAmount - earnestMoney;
            }
          }
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 响应状态
    rexponseStust(row) {
      getChinaPayCode(row.id).then((res) => {
        if (res.code == 200) {
          if (res.data != null) {
            this.responseData = res.data;
            this.dialogVisible = true;
          } else {
            this.$message.error("暂无数据");
          }
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 查询按钮
    payQueryFun(row) {
      getPayQuery(row.id).then((res) => {
        if (res.code == 200) {
          if (res.data != null) {
            this.dialogVisiblepay = true;
            this.payQueryData = res.data;
          } else {
            this.$message.error("暂无数据");
          }
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //发起扣款
    deductionFun(row) {
      let form = {};
      form.id = row.id;
      form.type = "p";
      form.channel = this.channel;
      postDeductPerson(form).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.message);
          this.deductionShow = false;
          this.gitList();
        } else {
          this.$message.error(res.message);
          this.gitList();
        }
      });
    },
    // 线下代扣
    offlineFun(row) {
      this.offlineForm.id = row.id;
      this.offlineDialog = true;
    },
    // 线下代扣提交
    offlineSubim() {
      this.$refs.offlineForm.validate(() => {
        putOffline(this.offlineForm).then((res) => {
          if (res.code == 200) {
            this.offlineDialog = false;
            this.$refs.offlineForm.resetFields();
            this.$message.success(res.message);
            this.gitList();
          } else {
            this.$message.error(res.message);
            this.gitList();
          }
        });
      });
    },
    closeOfflineDia(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
          this.$refs.offlineForm.resetFields();
        })
        .catch(() => {
        });
    },
    //分页
    handleCurrentChange(cpage) {
      this.query.pageNo = cpage;
      this.gitList();
    },
    handleSizeChange(psize) {
      this.query.pageSize = psize;
      this.gitList();
    }
  }
};
</script>

<style scoped type="less">
.content {
  font-size: 14px;
  margin: 20px 0;
  text-align: left;
}

::v-deep .el-pagination {
  position: absolute;
  right: 0;
  margin-top: 20px;
}

::v-deep .el-pagination__total {
  visibility: hidden;
}

.title {
  font-family: Microsoft YaHei;
  font-size: 12px;
  font-weight: 400;
  line-height: 21px;
  position: absolute;
  left: 0;
  margin-top: 15px;
  color: rgba(51, 51, 51, 1);
}

.active {
  color: #fb575e;
}

.native {
  color: grey;
}

::v-deep .el-dialog__footer {
  text-align: center;
}

.koukuan-layer {
  text-align: center;
}

</style>
